<template>
  <div class="container">
    <div class="mint-search">
      <div class="mint-searchbar">
        <div class="mint-searchbar-label">出访人员</div>
        <div class="mint-searchbar-inner">
          <i class="mintui mintui-search"></i>
          <input type="search" placeholder="搜索" v-model="tripSearchReq.tripper" class="mint-searchbar-core" @blur="handleSearchTrips">
        </div>
        <router-link :to="{name:'businessTrip'}" class="mint-searchbar-cancel">取消</router-link>
      </div>
      <div id="wrapper" ref="scrollWrap">
        <div class="scroller" ref="scroller">
          <ul ref="scrollList" v-if="tripList.length > 0">
            <router-link tag="li" v-for="trip in tripList" :key="trip.id" :to="{name: 'tripDetail', params:{tripId: trip.id}}">
              <trip-list-item :businessTrip="trip"></trip-list-item>
            </router-link>
          </ul>
          <empty-list v-else></empty-list>
        </div>
      </div>
    </div>
    <mt-datetime-picker
      ref="picker"
      type="datetime"
      year-format="{value} 年"
      month-format="{value} 月"
      date-format="{value} 日"
      hour-format="{value} 时"
      minuteFormat="{value} 分"
      @confirm="handleConfirm">
    </mt-datetime-picker>
  </div>
</template>
<script>
  import moment from 'moment'
  import BScroll from 'better-scroll'
  import { Indicator } from 'mint-ui';
  import {getStyle,getDeviceRatio} from '../../base/js/util.js'
  import {api} from "../../base/js/api.js"
  import fetch from '../../utils/fetch'
  import TripListItem from './TripListItem.vue'
  import { Toast } from 'mint-ui';
  import EmptyList from '../Empty-List'
  /*获取当前缩放比*/
  const DEVICE_RATIO=getDeviceRatio();
  /*下拉配置*/
  const DOWN_CONFIG={
    threshold:20*DEVICE_RATIO,
    stop: 0*DEVICE_RATIO
  }
  /*上拉配置*/
  const UP_CONFIG={
    threshold:-20*DEVICE_RATIO,
  }
  export default{
    data () {
      return {
        tripSearchReq:{
          startDate: '',
          endDate: '',
          tripper:''
        },
        tripList:[]
      }
    },
    components:{
      TripListItem,
      EmptyList
    },
    methods:{
      handleClick(type){
        this.type = type
        this.$refs.picker.open();
      },
      currentDate(){
        return new Date()
      },
      handleConfirm(data){
        let date = moment(data).format('YYYY-MM-DD HH:MM:SS');
        if(this.type==='start'){
          this.tripSearchReq.startDate = date;
        }
        if(this.type === 'end'){
          this.tripSearchReq.endDate = date;
        }
      },
      handleSearchTrips() {
        Indicator.open()
        let formData = JSON.stringify(this.tripSearchReq)
        fetch.post('/api/business/trip/search', formData).then(response =>{
           if (response.data.success) {
              this.tripList = response.data.obj
              if(this.tripList.length === 0) {
                Toast({
                  message: '暂无您要查找的数据',
                  position: 'bottom',
                  duration: 5000
                });
              }
           }else {
             Toast({
               message: '暂无您要查找的数据',
               position: 'bottom',
               duration: 5000
             });
           }
          setTimeout(()=>{
            Indicator.close();
          }, 500)
        })
      }
    },
    mounted(){
      const {scroller, scrollWrap, scrollList} = this.$refs;
      this.scroller = new BScroll(scrollWrap, {
        click: true,
        probeType: 3,
        pullDownRefresh: DOWN_CONFIG,
        pullUpLoad: UP_CONFIG
      });
    }
  }
</script>
<style scoped lang="scss">
  .container{
    .mint-search {
      position: fixed;
      width: 100%;
      .mint-searchbar{
        .mint-searchbar-label{
          display: inline-block;
          min-width: 60px;
          border:1px solid #D0D0D0;
          padding: 8px 5px 0;
          height: 28px;
          margin-right: 10px;

        }
      }
    }
    #wrapper{
      position: fixed;
      top: 50px;
      bottom: 3px;
      width: 100%;
      overflow: hidden;
      background:#F0EFF5;
      .scroller{
        position: absolute;
        width: 100%;
        &.topPadding{
          top:1rem;
        }
        z-index: 0;
      }
    }

  }
  a:link{text-decoration:none;}
  a:visited{text-decoration:none;}
  a:hover{text-decoration:none;}
  a:active{text-decoration:none;}
</style>
